<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>friends_list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="GUI/add_on/frd_list.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/GooWhere/json.js"></script>

<script type="text/javascript">

    //Get current logged in user.
    var userName="${sessionScope.currentUser}";

            //Start loading online friends.
            function loadLiveFriends()
            {   
                //Goes to servelet and get the online friends associated with the user.
                //using time stamp to prevent browser cache previous data.
                var getdate = new Date();
                document.getElementById("loading").style.display = 'block';
                var url = "FriendsServlet?userName=" + userName;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url + "&ms=" + getdate.getTime(), true);
                req.onreadystatechange = friendsLiverequestcallback;
                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

                req.send(null);
            }

            //geting result and render result to html.
            function friendsLiverequestcallback() {
                //showLiveLoad();
                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();
                    var newFriendsTable = document.getElementById("friends_box_r");

                    // erase existing clues from friends_list
                    while (newFriendsTable.hasChildNodes()) {
                        newFriendsTable.removeChild(newFriendsTable.firstChild);
                    }

                    existingfriends=response.length;
                    //dynamically create elements.
                    var totalOnline = 0;
                    for (var i = 0; i < existingfriends; i++) {
                    if(response[i]["friendOnline"] == "1"){
                        totalOnline++;
                        var newBlockTable = document.createElement("table");
                        newBlockTable.setAttribute("id", "liveperson");
                        newBlockTable.setAttribute("boarder", "0");
                        newBlockTable.setAttribute("cellpadding", "0");
                        newBlockTable.setAttribute("cellspacing", "0");
                        newBlockTable.setAttribute("width", "180");

                        var newBlockRow = document.createElement("tr");

                        var newBlocktd = document.createElement("td");

                        var newBlockFrame = document.createElement("div");
                        newBlockFrame.setAttribute("id", "friend_frame_r");
                        newBlockFrame.innerHTML = "<img src=\"GUI/images/friends_list/player_bg.png\" width=\"180\" height=\"61\" />";

                        var newBlockPic = document.createElement("div");
                        newBlockPic.setAttribute("id", "friend_pic_r");
                        newBlockPic.innerHTML =  "<img src=\"GUI/images/friends_list/player_"+response[i]["friendPicture"]+".png\" width=\"35\" height=\"35\" />";

                        var newBlockName = document.createElement("div");
                        newBlockName.setAttribute("class", "friends_window_player_name");
                        newBlockName.setAttribute("id", "player_name_r");
                        newBlockName.innerHTML = response[i]["friendName"];

                        var newDot1 = document.createElement("div");
                        newDot1.setAttribute("id", "player_dot_1_r");
                        newDot1.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        var newBlockRank = document.createElement("div");
                        newBlockRank.setAttribute("class", "friends_window_player_data");
                        newBlockRank.setAttribute("id", "friend_rank_r");
                        //i+1 because rank starts at 1
                        newBlockRank.innerHTML = "Rank: " + (i+1);

                        var newDot2 = document.createElement("div");
                        newDot2.setAttribute("id", "player_dot_2_r");
                        newDot2.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        var newBlockScore = document.createElement("div");
                        newBlockScore.setAttribute("class", "friends_window_player_data");
                        newBlockScore.setAttribute("id", "friend_points_r");
                        newBlockScore.innerHTML = "Score: " + response[i]["friendScore"];

                        var newBlockLevel = document.createElement("div");
                        newBlockLevel.setAttribute("id", "friend_level_r");
                        newBlockLevel.innerHTML = "<img src=\"GUI/images/friends_list/level_"+response[i]["friendLevel"]+".png\" width=\"22\" height=\"27\" />";

                        newBlockFrame.appendChild(newBlockPic);
                        newBlockFrame.appendChild(newBlockName);
                        newBlockFrame.appendChild(newDot1);
                        newBlockFrame.appendChild(newBlockRank);
                        newBlockFrame.appendChild(newDot2);
                        newBlockFrame.appendChild(newBlockScore);
                        newBlockFrame.appendChild(newBlockLevel);
                        newBlocktd.appendChild(newBlockFrame);
                        newBlockRow.appendChild(newBlocktd);
                        newBlockTable.appendChild(newBlockRow);
                        newFriendsTable.appendChild(newBlockTable);
                    }
                    }
                        //var timeDelay = setTimeout("closeLiveLoad();",2000);
                        //clearTimeout(timeDelay);
                        document.getElementById("num_online").innerHTML = "Online ("+totalOnline+")";
                        setTimeout(closeLiveLoad, 1000);
                        //closeLiveLoad();
                }
                //display loading in live update window.
                function showLiveLoad()
                {
                    document.getElementById("loading").style.display = 'block';
                }
                //Close loading in live update window.
                function closeLiveLoad()
                {
                    document.getElementById("loading").style.display = 'none';
                }

            }
</script>

</head>
<body bgcolor="#ffffff">
<img name="friends_list" src="GUI/images/friends_list/friends_list.png" width="236" height="282" border="0" id="friends_list" alt="" />

<div class="friends_box_r" id="friends_box_r">
    <!--
<table border="0" cellpadding="0" cellspacing="0" width="180">
<!-- Friend Rectangle Start--
    <tr id="friend">
                <td>
                <div id="friend_frame_r">
                        <img src="GUI/images/friends_list/player_bg.png" width="180" height="61"/>
           		  <div id="friend_pic_r"><img src="GUI/images/friends_list/player_0.png" width="35" height="35" /></div>
                        <div id="friend_level_r"><img src="GUI/images/friends_list/level_1.png" width="22" height="28" /></div>
                  	<div class="friends_window_player_name" id="player_name_r">Player Two</div>
           		  <div id="player_dot_1_r"><img src="GUI/images/account/dot.png" width="6" height="6" /></div>
                        <div class="friends_window_player_data" id="friend_rank_r">Rank: 3409</div>
                        <div class="friends_window_player_data" id="friend_points_r">Points: 650,020</div>
                        <div id="player_dot_2_r"><img src="GUI/images/account/dot.png" width="6" height="6" /></div>
                </div>
                </td>
    </tr>
<!-- Friend Rectangle End--
</table>
-->
</div>
<div id="num_online" class="num_online">Online (0)</div>
<div id="loading" style="display:none"><img src="GUI/images/friends_list/goo_load_s.gif" width="18" height="18" /></div>
<div id="top_shade"><img src="GUI/images/friends_list/top_shade.png" width="196" height="8" /></div>
<div id="btm_shade"><img src="GUI/images/friends_list/btm_shade.png" width="196" height="8" /></div>
</body>
</html>
